<template>
  <div>
    <f7-list media-list messages>
        <f7-list-item v-for="item in messages"
                      :title="item.fromUserName"
                      :subtitle="item.message"
                      :link="toMessage()"
                      @click="setChatUser(item)"
                      :media="getAvatarMedia(item)"
        >
        </f7-list-item>
    </f7-list>

  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import {getMessageList} from '../api/api'
  import {IMG_URL} from '../api/url'
  export default {
    computed: {
      ...mapState({
        websocket: state => state.websocket,
        user: state => state.user
      })
    },
    data() {
      return {
        pageInfo: "",
        messages: [],
        currentUser:{},
        intervalId:null,
        userId:""
      }
    },
    methods: {
      getMessages(userId){
        this.userId = userId;
        this.$f7.showIndicator();
        var obj = {
          param: {oredCriteria: [
              {
                criteria: [{
                   "condition": "to_user_id =",
                   "value": userId,
                   "singleValue": true
                }]
              }
            ]
          },
          pageInfo: {
            pageNum:1,
            pageSize:5
          }
        }
        var json=JSON.stringify(obj);
        getMessageList(json).then(data => {
          if (data.status == 200) {
            this.$f7.hideIndicator();
            this.messages = data.data.list;
          } else {
            this.$f7.alert(data.msg, "hichat");
          }
        });
      },
      getAvatarMedia(item){
        var unread = item.unread ? "<span style='position: absolute;top: 1px;display: block;left: 54px;background: green;width: 16px;height: 16px;text-align: center;line-height: 20px;color: #fff;border-radius: 8px;'>" + item.unread + "</span>" : "";
        return "<img class='avatar' src='" + IMG_URL + "/" + item.fromUserImg + "'/>" + unread;
      },
      toMessage(){
        return "/message"
      },
      setChatUser(item){
        this.$store.dispatch("initChatUser", {"id":item.fromUserId, "nickname" : item.fromUserName, "avatar":item.fromUserImg});
      }
    }
  }
</script>

<style lang="less" scoped>
  /deep/ .avatar {
    width: 50px;
    height: 50px;
  }
  
</style>
